<template>
  <view class="chat-page">
    <view class="conversation-list">
      <view 
        v-for="conv in conversations" 
        :key="conv.id"
        class="conversation-item"
        @click="openConversation(conv)"
      >
        <image :src="conv.avatar || '/static/default-avatar.png'" class="avatar"></image>
        <view class="conv-info">
          <view class="conv-header">
            <text class="conv-name">{{ conv.name }}</text>
            <text class="conv-time">{{ formatTime(conv.lastMessageTime) }}</text>
          </view>
          <view class="conv-footer">
            <text class="last-message">{{ conv.lastMessageContent }}</text>
            <view v-if="conv.unreadCount > 0" class="unread-badge">
              {{ conv.unreadCount }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface Conversation {
  id: string
  name: string
  avatar?: string
  lastMessageContent?: string
  lastMessageTime?: string
  unreadCount: number
}

const conversations = ref<Conversation[]>([])

onMounted(() => {
  loadConversations()
})

const loadConversations = async () => {
  try {
    const token = uni.getStorageSync('token')
    const res = await uni.request({
      url: 'http://localhost:8080/api/conversations',
      method: 'GET',
      header: {
        'Authorization': `Bearer ${token}`
      }
    })
    
    if (res.data.success) {
      conversations.value = res.data.data
    }
  } catch (error) {
    console.error('加载会话列表失败', error)
  }
}

const openConversation = (conv: Conversation) => {
  uni.navigateTo({
    url: `/pages/chat/detail?id=${conv.id}`
  })
}

const formatTime = (time?: string) => {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  
  if (date.toDateString() === now.toDateString()) {
    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  }
  return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })
}
</script>

<style scoped>
.chat-page {
  height: 100vh;
  background: #f5f5f5;
}

.conversation-list {
  background: white;
}

.conversation-item {
  display: flex;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.conv-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.conv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.conv-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.conv-time {
  font-size: 24rpx;
  color: #999;
}

.conv-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}

.last-message {
  font-size: 28rpx;
  color: #666;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unread-badge {
  min-width: 36rpx;
  height: 36rpx;
  padding: 0 8rpx;
  background: #ff3b30;
  color: white;
  font-size: 20rpx;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
